<template>
  <view class="container"
        style="background-position: right 30% center; background-image: url('/static/back.png');background-size: cover;background-repeat: no-repeat;">
		
		
		<view class="container-t">
			<view>	
				<text>余额</text>
				<text class="num" style="font-size: 30px;display: block;">{{ count.balance}}</text>
			</view>
			<view style="display: flex;">
				<view class="container-l">
					<text>累计收益</text>
					<text class="num" style="">{{ count.balanceTotal}}</text>
				</view>
				<view class="container-l">
					<text>累计订单数</text>
					<text class="num" >{{ count.orderNumber}}</text>
				</view>
			</view>
		
			
		</view>
		<view class="container-j">
			<uni-title type="h2" title="我的订单" color="white"></uni-title>
			<view class="container-icon">
				<view class="icon-box">
					
					<text>已确认订单数（笔）</text>
					<text class="num" >{{ count.sureBalance}}</text>
		
				</view>
				<view class="icon-box">
					
					<text>已确认收益（元）</text>
					<text class="num" >{{ count.sureOrderNumber}}</text>
				</view>
				<view class="icon-box">
					
					<text>待确认订单数</text>
					<text class="num" >{{ count.waitSureBalance}}</text>
				</view>
				<view class="icon-box">
					
					<text>待确认收益</text>
					<text class="num" >{{ count.waitSureOrderNumber}}</text>
				</view>
			</view>
		</view>
		
  </view>
</template>

<script>
	import {getUserInfo,
	getuserDrinfo,
	count} from '@/api/user.js'
	import {getwallet} from '@/api/user.js'
	import {
		mapState
	} from 'vuex';
	
	export default {
		data() {
			return {
				userInfo:null,
				balance:null,
				count:null,
	
			}
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			loadData() {
				// getUserInfo().then(res=>{
				// 	if(res.code===200){
				// 		console.log(res);
				// 		this.userInfo=res.user;
				// 	}
				// })
				// getuserDrinfo().then(res=>{
				// 	if(res.code===200){
				// 		console.log(res);
						
				// 	}
				// })
				// getwallet().then(res=>{
				// 	if(res.code===200){
				// 		console.log(res);
				// 		this.balance=res.data;
				// 	}
				// })
				count().then(res=>{
					if(res.code===200){
						console.log(res);
						this.count=res.data;
					}
				})
			},
			
			
		}
	}
</script>


<style lang='scss'>
page {

}

.container {
  
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-position: right 30% center;
  background-image: url(/static/back.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.container-l{
	width: 48%;
}
.container-top {
		display: flex;
		margin: 20upx;

		.tag-box {
			margin: 10upx;

			.tag {
				background-color: rgba(#ffbc13, 0.2);
			}

		}

		.text-ac {
			color: darkgray;
		}
	}

	.container-t {
		
		justify-content: space-between;
		color: #fff;
		padding: 0 40upx;
		margin: 30upx 0 ;

		.button-cz {
			background: linear-gradient(to right, #5eba8f, #3ba9b3);
			color: #fff;
			height: 55upx;
			width: 150upx;
			line-height: 55upx;
			border-radius: 25upx;
			font-size: $font-base;

		}
	}
	

	.container-j {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 10px;
		border-radius: 10px;
	}
	
	.container-icon {
		background-color: $bg-color;
		margin: 10px;
	    display: grid;
	    grid-template-columns: repeat(2, 1fr); 
	    grid-template-rows: repeat(2, auto); 
	    gap: 0; 
	   width: 100%;
	    border-radius: 10px; 
	    overflow: hidden;
	    position: relative; 
	}
	
	.container-icon::before,
	.container-icon::after {
	    content: '';
	    position: absolute;
	    background-color: #3f4254; 
	}
	
	.container-icon::before {
	    top: 50%;
	    left: 0;
	    width: 100%;
	    height: 1px;
	}
	
	.container-icon::after {
	    top: 0;
	    left: 50%;
	    width: 1px; 
	    height: 100%;
	}
	
	.icon-box {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    color: white;
	    padding: 10px; 
	   
	}
	
	.icon-box:last-child {
	    border-right: none; 
	}
	
	.icon-box:nth-child(2n) {
	    border-bottom: none;
	}

</style>
